<template>
  <BasicModal
    ref="showActionModal"
    title="确认运行流水线"
    width="400px"
    @emit-callback-fn="addCallbackFn"
    :confirmLoading="triggerLoading"
    @emit-close="closeModal"
  >
    <template #content>
      <a-form ref="formDataRef" label-align="right" class="record-form" :model="formState">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item label="运行备注" name="remark">
              <a-textarea
                v-model:value="formState.remark"
                placeholder="请输入运行备注"
                :autoSize="{ minRows: 3 }"
                allowClear
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </template>
  </BasicModal>
</template>
<script setup lang="ts">
import { triggerPipeline } from '@/api/pipeline';
import { message } from 'ant-design-vue';

const emit = defineEmits(['handleSuccess']);
const formDataRef = ref<any>();
const formState = reactive({
  remark: '',
});
const showActionModal = ref();

const triggerLoading = ref(false);

const showModal = (data: any) => {
  showActionModal.value.showModal(data);
};
const closeModal = () => {
  formState.remark = '';
};
const addCallbackFn = async (evt: any) => {
  const res = await formDataRef.value.validate();
  try {
    triggerLoading.value = true;
    await triggerPipeline({ pipelineCode: evt.propsData.pipelineCode, remark: res.remark }).then(() => {
      message.success('运行成功');
      emit('handleSuccess', evt.propsData.pipelineCode);
      triggerLoading.value = false;
      showActionModal.value.hideModal();
    });
  } finally {
    triggerLoading.value = false;
  }
};
defineExpose({
  showModal,
});
</script>
